<template>
  <div>
    <div class="bd2 flex-row">
      <div class="box2 flex-col" v-for="item,index in tags" :key="index" @click="setCharts(item)"
        :class="{
        active: active===item.id
        }">
        <span class="word2">{{item.name}}</span>
      </div>
      <span class="txt5">人才库：</span>
      <span class="word3">{{dataFrom.total}}</span>
    </div>

    <highcharts :options="chartOptions" ref="highcharts" style="height:205px;"></highcharts>

    <div class="chart-img">
      <img src="./img/chartbg.png" alt="">
    </div>
  </div>
</template>

<script>
import dataFrom from '@/assets/json/talentShoecase.json'
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import Highcharts3D from 'highcharts/highcharts-3d';

exportingInit(Highcharts)
Highcharts3D(Highcharts)

export default {
  data(){
    return {
      dataFrom: dataFrom,
      active: 1,
      tags: [{name: '年龄', id: 1},{name: '领域', id: 2},{name: '引进', id: 3}],
      chart: null,
      chartOptions:{
        colors: ['#fbc26e', '#649af5', '#85ded4', '#a5e5ff', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
        chart: {
          type: 'pie',
          backgroundColor: 'none',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        tooltip: {
          pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        title: false,
        exporting: {
          enabled:false
        },
        credits: {
          enabled:false
        },
        legend: {
          align: 'right', //水平方向位置
          verticalAlign: 'middle', //垂直方向位置
          itemMarginTop: 7,
          itemMarginBottom: 7,
          layout: 'vertical',
          x: 0,
          y: 10,
          width: 100,
          itemDistance: 30,//距离
          symbolWidth: 15,  //设置为正方形
          symbolHeight: 15,
          symbolRadius:0,
          itemStyle: {
            color: 'rgba(17, 108, 146, 1)',
            fontSize: '14px',
            fontWeight: 500,
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 20,
            dataLabels: {
              enabled: false,
              format: '{point.name}<br/>{point.y}',
              style: {
                color: 'rgba(17, 108, 146, 1)',
                textOutline: 'none',
                fontWeight: 500,
              }
            },
						showInLegend: true,
            marker: {
              radius: 5,
              states: {
                  hover: {
                      enabled: true,
                      lineColor: 'rgb(100,100,100)'
                  }
              }
            },
            states: {
              hover: {
                  marker: {
                      enabled: true
                  }
              }
            },
            tooltip: {
              headerFormat: '',
              // animation: true,
              pointFormat: '<div style="color:rgba(17,108,146,1);padding: 10px; font-size: 12px;background:rgba(115,207,202,0.11)"><b>{point.name}</b><br>人数：{point.y}<br>占比：{point.percentage}%</div>'
            }
          },
        },
        series: [
          {
            type: 'pie',
            name: '占比',
            data: []
          }
        ]
      },
      timer: null
    }
  },
  mounted() {
    let data = []
    let list = this.dataFrom.age
    list.forEach(item => {
      data.push([item.name,item.value])
    });
    this.chartOptions.series[0].data = data
    this.initTime()
  },
  methods: {
    setCharts(item) {
      this.active = item.id
      let data = []
      let list = []
      if(item.id===1){
        list = this.dataFrom.age
      }
      if(item.id===2){
        list = this.dataFrom.area
      }
      if(item.id===3){
        list = this.dataFrom.import
      }
      list.forEach(item => {
        data.push([item.name,item.value])
      });
      this.chartOptions.series[0].data = data
      this.initTime()
    },
    initTime(){
      this.$refs.highcharts.chart.redraw()
      let activePoint = 0
      let chart = this.$refs.highcharts.chart
      this.timer = setInterval(function() {
      	if (activePoint === chart.series[0].data.length) {
      		activePoint = 0;
      	}
      	chart.tooltip.refresh(chart.series[0].data[activePoint]);
      	activePoint++;
      }, 3000)
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less">
  .chart-img{
    position: absolute;
    top: 143px;
    left: 90px;
    z-index: -100;
    transform: rotateX(45deg);
    img{
      animation: turn3 20s linear infinite;
      width:205px;
    }
  }
  @keyframes turn3 {
    100% {
        -webkit-transform: rotateZ(360deg);
    }
    75% {
        -webkit-transform: rotateZ(270deg);
    }
    50% {
        -webkit-transform: rotateZ(180deg);
    }
    25% {
        -webkit-transform: rotateZ(90deg);
    }
    0% {
        -webkit-transform: rotateZ(0deg);
    }
  }
</style>
